import { useCallback, useState, useMemo } from 'react';
// import PropTypes from 'prop-types';
import { useReactFlow, useOnSelectionChange } from 'reactflow';
import { isEmpty, pick, isEqual, merge } from 'lodash-es';

import { SELECTED_TYPE } from '@/utils';
import { RenderJsonSchema } from '@/components';
import { NodeSchema, EdgeSchema, BackgroundSchema } from './schema';
import { updateEdges, updateNodes } from './utils';
import { useFlowContext } from '../context';

const SCHEMA = {
  [SELECTED_TYPE.NODE]: NodeSchema,
  [SELECTED_TYPE.EDGE]: EdgeSchema,
  [SELECTED_TYPE.BACKGROUND]: BackgroundSchema,
};

const initSelected = { label: SELECTED_TYPE.BACKGROUND, value: {} };

Setting.propTypes = {};

function Setting() {
  const { setNodes, setEdges } = useReactFlow();
  const [selected, setSelected] = useState(initSelected);

  // @ts-ignore
  const state = useFlowContext();

  /**
   * 切换 Node Edge时触发
   */
  useOnSelectionChange({
    onChange: ({ nodes, edges }) => {
      const _value = (isEmpty(edges) ? nodes : edges)[0];
      const payload = {
        label: isEmpty(edges) ? SELECTED_TYPE.NODE : SELECTED_TYPE.EDGE,
        value: _value,
      };

      if (isEmpty(_value)) {
        Object.assign(payload, initSelected);
      }

      console.log('changed selection', payload, nodes, edges);
      setSelected(payload);
    },
  });

  /**
   * 右侧表单的值改变
   */
  const onValuesChanged = useCallback((values: any) => {
    const {label, value} = selected;
    const isBackground = isEqual(label, SELECTED_TYPE.BACKGROUND);
    if (isBackground) {
      state.backgroundProps = merge({}, state.backgroundProps, values);
      console.log(59, JSON.stringify(state.backgroundProps))
      return;
    }

    const isNode = isEqual(label, SELECTED_TYPE.NODE);
    // console.log('isNode', isNode, selected, values)
    if(isNode) {
      state.nodeProps = merge({}, state.nodeProps, values);
      updateNodes({ setNodes, node: value, values });
      return;
    }

    state.edgeProps = merge({}, state.edgeProps, values);
    updateEdges({ setEdges, edge: value, values });
  }, [setNodes, setEdges, selected]);

  /**
   * 表单赋值
   */
  const fields = useMemo(() => {
    const {label, value} = selected;
    const isBackground = isEqual(label, SELECTED_TYPE.BACKGROUND);
    const isNode = isEqual(label, SELECTED_TYPE.NODE);
    console.log('field', value, {e: state.edgeProps, n: state.nodeProps, b: state.backgroundProps})

    const _values = isBackground
      ? state.backgroundProps
      : isNode ? state.nodeProps : state.edgeProps;

    return merge(_values, value, value.data);
  }, [selected]);

  return (
    <div
      className='absolute top-0 right-0 bottom-0 p-2 bg-white'
      style={{ width: 300 }}
    >
      <RenderJsonSchema
        value={fields}
        onChange={onValuesChanged}
        schema={SCHEMA[selected.label]}
        // form={{ layout: 'vertical' }}
        className='__small__'
      />
    </div>
  );
}

export default Setting;
